<template>
  <div>
    <el-row>
      <span id="title"><b>结算管理</b></span>
    </el-row>

    <el-row class="shaixuan_1"
            type="flex"
            align="middle"
            style="text-align: center">
      <el-col :span="3">
        <span>结算数据</span>
      </el-col>
      <el-col :span="3"
              :offset="4">
        <el-button type="primary" @click="getExcel()">导出数据</el-button>
      </el-col>
      <el-col :span="3">
        <el-button @click="getAll()">全部</el-button>
      </el-col>
      <el-col :span="3">
        <el-button @click="getWeek()">最近一周</el-button>
      </el-col>
      <el-col :span="3">
        <el-button @click="getMonth()">最近30天</el-button>
      </el-col>
      <!-- <el-col :span="5">
        <el-date-picker v-model="value"
                        type="date"
                        placeholder="选择日期"
                        value-format="yyyy-MM-dd"
                        @click="getDate(value)">
        </el-date-picker>
      </el-col> -->
    </el-row>

    <el-row type="flex"
            align="middle"
            class="shaixuan_20"
            style="text-align: center">
      <el-col :span="12"><b><span class="countComputed">待结算金额<div>{{unsettleCostSum}}</div></span></b></el-col>
      <el-col :span="12"><b><span class="countComputed">可用金额<div>{{availableFunds}}</div></span></b></el-col>

    </el-row>
    <el-row type="flex"
            align="middle"
            id="data_1">
      <el-col>
        <i class="iconfont icon-querylist"></i>
        <span>数据列表</span>
      </el-col>
    </el-row>
    <el-row>
      <el-menu default-active="/index/settleManagement/settleRecord"
               mode="horizontal"
               router>
        <el-menu-item index="/index/settleManagement/settleRecord"
                      class="menu">结算记录</el-menu-item>
        <el-menu-item index="/index/settleManagement/balanceRecord"
                      class="menu">余额记录</el-menu-item>
      </el-menu>
    </el-row>
    <el-row>
      <router-view></router-view>
    </el-row>

     //数据显示页面
    
    <el-dialog title=""
               :visible.sync="visible"
                >
      <el-table :model="table"
                ref="editForm"
                :data="tableData">
        <el-table-column prop="doctorName"
                      label="医生姓名"
                      :label-width= "100">
        </el-table-column>
        <el-table-column prop="amount"
                      label="结算金额（税后）"
                      :label-width="100">
        </el-table-column>
        <el-table-column prop="bankNumber"
                      label="银行卡号"
                      :label-width="100">
        </el-table-column>
        <el-table-column prop="status"
                      label="结算状态"
                      :label-width="100">
        </el-table-column>
        <el-table-column prop="income"
                      label="收入来源"
                      :label-width="100">
        </el-table-column>
        <el-table-column prop="tradingTime"
                      label="交易时间"
                      :label-width="100">
        </el-table-column>
        
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
import settleRecordVue from './settleRecord.vue'
import balanceRecordVue from './balanceRecord.vue';

export default {
  data () {
    return {
      unsettleCostSum: 0,
      availableFunds: 0,
      tableData: [{
        doctorName:'',
        amount:'',
        bankNumber:'',
        status:'',
        income:'',
        tradingTime:''
        
      }],
      value:'',
      //页面显示
      visible: false,
    }
  },
  components: {
    settleRecordVue,
    balanceRecordVue
  },
  created () {
    this.$axios.get("/finance/settlement/unsettleCostSum").then(res => {
      
        this.unsettleCostSum = res.data
      
    }),
    this.availableFunds = 1000000000,
    
    this.getSettle()
  },
  
  methods:{
    getSettle(){
        this.$axios.get("/finance/settlement/")
        .then((res) => {
            if(res.data.code == 200){
                console.log(res.data)
                this.tableData = res.data.data;
                this.pageparm.total = res.data.data.total;
            }else{
                this.$message({type: 'info',message: res.data.message})
            }
        })
        .catch(err => {
            this.$message.error('数据加载失败，请稍后再试！')
        })
    },
    getExcel(){
        this.visible = true;
        this.getAll();
        this.$axios.get("/finance/settlement/export",{
            responseType:'blob'
        }).then(response => {
           //通过header中获取返回的文件名称
        let fileName = response.headers['content-disposition'].split(";")[1].split("filename=")[1]
        let blob = new Blob([response.data], { type: "application/vnd.ms-excel" })
        let downloadElement = document.createElement("a")
        var href = window.URL.createObjectURL(blob)
        downloadElement.href = href
        //指定下载的文件的名称，切记进行decode
        downloadElement.download = decodeURI(fileName)
        document.body.appendChild(downloadElement)
        downloadElement.click()
        //移除临时创建对象，释放资源
        document.body.removeChild(downloadElement)
        window.URL.revokeObjectURL(href)
      });
    },
     getWeek(){
        this.title = "近7天数据";
        this.visible = true;
        this.$axios.get("/finance/settlement/week")
        .then(res => {
            if (res.data.code === 200) {
                this.tableData = res.data.data
            }
        })
        .catch()
    },
    getMonth(){
        this.title = "近30天数据";
        this.visible = true;
        this.$axios.get("/finance/settlement/month")
        .then(res => {
            if (res.data.code === 200) {
                this.tableData = res.data.data
            }
        })
        .catch()
    },
    getDate(value){
        this.title = "后台数据";
        this.visible = true;
        this.$axios.get("/finance/settlement/date")
        .then(res => {
            if (res.data.code === 200) {
                this.tableData = res.data.data
            }
        })
        .catch()
    },
    getAll(){
        this.visible = true;
        this.$axios.get("/finance/settlement/")
        .then(res => {
            if (res.data.code === 200) {
                this.tableData = res.data.data
            }
        })
        .catch()
    }
  }

}
</script>
<style scoped>
#title {
  font-size: 30px;
}
.shaixuan_1 {
  margin-top: 20px;
  margin-bottom: 20px;
  height: 50px;
  font-size: 20px;
  line-height: 50px;
  background-color: rgb(241, 241, 241);
}
.shaixuan_2 {
  height: 50px;
}
#data_1 {
  margin-top: 20px;
  height: 50px;
  font-size: 20px;
  background-color: rgb(241, 241, 241);
}
.menu {
  width: 50%;
  text-align: center;
}
.countComputed {
  font-size: 2em;
}
</style>